<template>
  <div class="population-page">
    <div class="top-tools">
      <h3>各年级参与不同课程体系人数分布</h3>
    </div>
    <div id="population"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data: [
        { name: "其他", value: 83, title: "2016级参与人数" },
        { name: "春粟劳育计划", value: 0, title: "2016级参与人数" },
        { name: "多彩青春计划", value: 21, title: "2016级参与人数" },
        { name: "红色筑梦计划", value: 1325, title: "2016级参与人数" },
        { name: "经典悦读计划", value: 0, title: "2016级参与人数" },
        { name: "全球胜任力计划", value: 0, title: "2016级参与人数" },
        { name: "师长领航计划", value: 0, title: "2016级参与人数" },

        { name: "其他", value: 214, title: "2017级参与人数" },
        { name: "春粟劳育计划", value: 0, title: "2017级参与人数" },
        { name: "多彩青春计划", value: 81, title: "2017级参与人数" },
        { name: "红色筑梦计划", value: 3439, title: "2017级参与人数" },
        { name: "经典悦读计划", value: 3, title: "2017级参与人数" },
        { name: "全球胜任力计划", value: 4, title: "2017级参与人数" },
        { name: "师长领航计划", value: 0, title: "2017级参与人数" },

        { name: "其他", value: 680, title: "2018级参与人数" },
        { name: "春粟劳育计划", value: 11, title: "2018级参与人数" },
        { name: "多彩青春计划", value: 680, title: "2018级参与人数" },
        { name: "红色筑梦计划", value: 4169, title: "2018级参与人数" },
        { name: "经典悦读计划", value: 9, title: "2018级参与人数" },
        { name: "全球胜任力计划", value: 21, title: "2018级参与人数" },
        { name: "师长领航计划", value: 22, title: "2018级参与人数" },

        { name: "其他", value: 701, title: "2019级参与人数" },
        { name: "春粟劳育计划", value: 29, title: "2019级参与人数" },
        { name: "多彩青春计划", value: 973, title: "2019级参与人数" },
        { name: "红色筑梦计划", value: 5819, title: "2019级参与人数" },
        { name: "经典悦读计划", value: 18, title: "2019级参与人数" },
        { name: "全球胜任力计划", value: 48, title: "2019级参与人数" },
        { name: "师长领航计划", value: 40, title: "2019级参与人数" }
      ]
    };
  },
  methods: {
    createChart() {
      const chart = new Chart({
        container: "population",
        autoFit: true,
        height: 300
      });

      chart.data(this.data);
      chart.scale("name", {
        type: "cat"
      });
      chart.scale("value", {
        nice: true
      });
    chart.axis('name',{
        label:{
            style:{
                fill:'#fff',
                fontSize:14
            }
        }
    })
     chart.axis('value',{
        label:{
            style:{
                fill:'#fff'
            }
        }
    })
    chart.legend({
        itemName:{
            style:{
                fill:'#fff',
                fontSize:16,
                lineHeight:18
            }
        },
        marker:{
            style:{
                r:8
            }
        }
    })
      chart.tooltip({
        showCrosshairs: true,
        shared: true
      });
        
      chart
        .area()
        .position("name*value")
        .shape("smooth")
        .color("title",['#2CD54D','#FFB73B','#FF5DE4','#2CD54D'])
      chart
        .line()
        .shape("smooth")
        .position("name*value")
        .color("title",['#2CD54D','#FFB73B','#FF5DE4','#2CD54D'])

      chart
        .point()
        .position("name*value")
        .color("title",['#2CD54D','#FFB73B','#FF5DE4','#2CD54D'])
        
        .shape("circle");

      chart.interaction("element-highlight");

      chart.render();
    }
  },
  mounted() {
    this.createChart();
  }
};
</script>

<style lang="scss" scoped>
.population-page {
  padding: 12px 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
      margin-bottom: 20px;
    }
  }
}
</style>